<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" class="jbg4 jbg4-full">
<head>
    <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
    <title>jbgallery 4.0 mockup</title>
    <meta name="author" content="Massimiliano Balestrieri" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<!--
	goals:
	1) image centered 
	2) size original
	
	test (latest version : firefox 5 - ie9 - chrome 12):
	chrome, ff, ie9, ie8
	
	ko : ie7
	
-->	    
    <style type="text/css">
html.jbg4-full, 
html.jbg4-full body
{
	width:100%;
	height:100%; 
	margin:0;
	padding:0px;
	overflow:hidden;
}
html.jbg4-full, 
html.jbg4-full body,
.jbgallery
{
	background:#000;
}
/*slider*/
.jbg4-sld .jbg4-img{
	float:left;
	text-align:center;
}
.jbg4-img img{
	margin:0 auto;
	vertical-align:middle;
}


    </style>
   	<script type="text/javascript">
$(document).ready(function(){
	var _fullscreen = true;
	var that = $('.jbgallery');
	var _images = $('.jbg4-img');
	var _cnt = _fullscreen ? 'body' : that;
	var _bw = $(_cnt).width();
	var _bh = $(_cnt).height();
	
	//fullscreen - centered
	$(that).css({
		"height":_bh,
		"width":_bw,
		"line-height":_bh + 'px'//vertical align image
	});

	$(_images).css({
		"width":_bw
	});
	
});   		
   	</script>
    </head>    
<body>
<div class="jbgallery jbg4-cnt">
	<div class="jbg4-sld">
		<div class="jbg4-ptv">
			<div class="jbg4-img">
				<img class="jbg-cur" alt="1000x769" src="http://lh5.ggpht.com/_JJJpzXdPAI4/TQtnmWII_wI/AAAAAAAABaQ/Gemk2bH539A/d/test-1000x749.jpg" />
			</div>
			<div class="jbg4-img">
				<img alt="3000x2000" src="http://lh3.ggpht.com/_JJJpzXdPAI4/TQtnm9j0rBI/AAAAAAAABag/y_OSyw3xU8c/d/test-3000x2000.jpg" />
			</div>
		</div>
	</div>
</div>
</body>
</html>